<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>轻松批</title>
    <link rel="stylesheet" type="text/css" media="screen" href="css/style.css">
</head>

<body>
    <!-- 包裹层 -->
    <div class="wrap">
        <!-- 顶部部分 -->
        <div class="top">
            <div class="content">
                <div class="top_left">
                    <img src="img/logo.png" alt="">
                    <span>让批发更轻松</span>
                </div>
                <div class="top_mid">
                    <ul id="nav">
                        <li><a href="index.html"><span>首页</span></a></li>
                        <li class="active"><a href="html/service.html"><span>服务</span></a></li>
                        <li><a href="price.html"><span>定价</span></a></li>
                        <li><a href="about.html"><span>关于</span></a></li>
                    </ul>
                </div>
                <div class="top_right">
                    <button>立即申请</button>
                    <span>123456789</span>
                    <img src="img/h24.png" alt="">
                </div>
            </div>
        </div>
        <!-- 服务部分 -->
        <div class="service_body">
            <div class="content">
                <div class="service_header">
                    <h1>四大服务体系<span>解除后顾之忧</span></h1>
                    <span>从使用到理念，从培训到技巧，解决您开店的所有问题！</span>
                </div>
                <div class="service_body">
                    <div class="service_box">
                        <img src="img/p6.png" alt="">
                        <h3>极致产品</h3>
                        <p>最好的产品就是最好的服务<br>简单，易用，好用到极致</p>
                    </div>
                    <div class="service_box">
                        <img src="img/p9.png" alt="">
                        <h3>用户沟通群组</h3>
                        <p>最好的产品就是最好的服务<br>简单，易用，好用到极致</p>
                    </div>
                    <div class="service_box">
                        <img src="img/p8.png" alt="">
                        <h3>全天候服务</h3>
                        <p>最好的产品就是最好的服务<br>简单，易用，好用到极致</p>
                    </div>
                    <div class="service_box">
                        <img src="img/p7.png" alt="">
                        <h3>功能持续更新</h3>
                        <p>最好的产品就是最好的服务<br>简单，易用，好用到极致</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 底部部分 -->
        <div class="bottom">
            <div class="content">
                <ul>
                    <li>
                        <div class="bottom_box">
                            <h1>关于我们</h1>
                            <p>轻松批是广州市晶焰网络科技有限公司专为批发行业开发的成套批发管理工具，我们致力于解决批发行业的各种痛点，并未客户提供更好和更优质的产品。</p>
                        </div>
                    </li>
                    <li>
                        <div class="bottom_box">
                            <h1>合作伙伴</h1>
                            <span style="color: rgb(0,120,0);">阿里云—阿里巴巴网络服务平台</span>
                            <span>商米—小米控股商用设备提供商</span>
                        </div>
                    </li>
                    <li>
                        <div class="bottom_box">
                            <h1>联系方式</h1>
                            <span><img src="img/1-email.png">qsp@baokuant.com</span>
                            <span><img src="img/1-phone.png">+86 13826027418</span>
                            <span><img src="img/1-address.png">广州市越秀区人民南路88号肯德基二楼</span>
                        </div>
                    </li>
                    <li>
                        <div class="bottom_box">
                            <h1>帮助与支持</h1>
                            <span><img src="img/1-list.png">使用帮助</span>
                            <span><img src="img/1-phone.png">+86 13826027418</span>
                            <span><img src="img/1-address.png">广州市越秀区人民南路88号肯德基二楼</span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var tit = document.getElementById("nav");
        //alert(tit);
        //占位符的位置
        var rect = tit.getBoundingClientRect(); //获得页面中导航条相对于浏览器视窗的位置
        var inser = document.createElement("div");
        tit.parentNode.replaceChild(inser, tit);
        inser.appendChild(tit);
        inser.style.height = rect.height + "px";
    
        //获取距离页面顶端的距离
        var titleTop = tit.offsetTop;
        //滚动事件
        document.onscroll = function () {
            //获取当前滚动的距离
            var btop = document.body.scrollTop || document.documentElement.scrollTop;
            //如果滚动距离大于导航条据顶部的距离
            if (btop > titleTop) {
                //为导航条设置fix
                tit.className = "clearfix fix";
            } else {
                //移除fixed
                tit.className = "clearfix";
            }
        }
    </script>
</body>

</html>